<template>
  <a-row type="flex" justify="space-around" align="middle">
    <a-col class="header-menu-col">
      <a-menu
        class="header-menu"
        v-model:selectedKeys="selectedHeadKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px', fontWeight: 900, fontSize: '16px', minWidth: '144px', maxWidth: '550px' }"
      >
        <!-- 主页 -->
        <a-menu-item key="1" @click="toWorkbench">{{ $t('layout.basicLayout.personHomepage') }}</a-menu-item>
        <!-- 应用 -->
        <a-popover
          placement="bottom"
          trigger="click"
          overlayClassName="header-menu-app-popover">
          <template #content>
            <div class="header-menu-app-div">
              <a-carousel >
                <!-- 基础应用 -->
                <div class="header-menu-app-basic-type">
                  <a-card class="basic-type-card" :bordered="false">
                    <div slot="title" class="type-card-title">
                      <component :is="'setting-outlined'" class="type-card-icon"></component>
                      <span>{{ $t('layout.basicLayout.basicApp') }}</span>
                    </div>
                    <a-divider class="basic-type-card-divider"/>
                    <a-row type="flex" justify="start" align="top" class="basic-type-app-row">
                      <app-card
                        :title="item.i18n ? $t(item.title) : item.title"
                        :name="item.name"
                        v-for="(item,index) in basicApps"
                        :key="'basicApp-' + index"
                        @click="toModule(item.name)" />
                    </a-row>
                  </a-card>
                </div>
                <!-- 其他应用 -->
                <div class="header-menu-app-other-type">
                  <a-card class="other-type-card" :bordered="false">
                    <div slot="title" class="type-card-title">
                      <component :is="'appstore-outlined'" class="type-card-icon"></component>
                      <span>{{ $t('layout.basicLayout.otherApp') }}</span>
                    </div>
                    <a-divider class="other-type-card-divider"/>
                    <a-row type="flex" justify="space-between" align="top" class="basic-type-app-row">
                        <app-card
                          :title="item.i18n ? $t(item.title) : item.title"
                          :name="item.name"
                          v-for="(item,index) in otherApps"
                          :key="'otherApp-' + index"
                          @click="toModule(item.name)"/>
                    </a-row>

                  </a-card>
                </div>
              </a-carousel>
            </div>
          </template>
          <a-menu-item key="2" :class="appClass" @click="visible = !visible">
            {{ $t('layout.basicLayout.application') }}
          </a-menu-item>
        </a-popover>
        <!-- 更新说明 -->
        <a-menu-item
          key="3"
          @click="toUpdate"
          v-if="this.$config.layout.BasicLayout.header.showUpdateDes">
          {{ $t('layout.basicLayout.updateDes') }}
        </a-menu-item>
      </a-menu>
    </a-col>
  </a-row>
</template>

<script>
import AppCard from '@/views/layouts/components/AppCard';
export default {
  name: 'HeaderMenu',
  components:{
    AppCard
  },
  props: {
  },
  data () {
    return {
      visible: false,
      selectedHeadKeys: [],
      basicApps: this.$store.getters.getModuleTypes.basicApps,
      otherApps: this.$store.getters.getModuleTypes.otherApps,
      appClass: ''
    }
  },
  methods: {
    toWorkbench () {
      this.$router.push({
        path: '/defaultPage/front'
      })
    },
    toUpdate () {
      this.$router.push({
        path: '/defaultPage/versionUpdate'
      })
    },
    toModule (moduleName) {
      const moduleInfo = this.$store.getters.getModuleInfos.moduleInfos[moduleName]
      const getpath = function (moduleInfo) {
        let path = ''
        if (moduleInfo.children && moduleInfo.children.length > 0) {
          path = getpath(moduleInfo.children[0])
        } else {
          path = moduleInfo.path
        }
        return path
      }
      this.visible = false
      this.visible = true
        this.$router.push({
        path: getpath(moduleInfo),
        query: {
          moduleName: moduleName
        }
      })
    },
    /**
     * 处理顶部导航栏的选中效果
     * @param path
     */
    headKeysChange (path) {
      if (path.startsWith('/defaultPage/front')) {
        this.selectedHeadKeys = ['1']
      } else if (path.startsWith('/defaultPage/versionUpdate')) {
        this.selectedHeadKeys = ['3']
      } else if (path.startsWith('/defaultPage/self')) {
        this.selectedHeadKeys = []
      } else {
        this.selectedHeadKeys = ['2']
      }
      this.appClass = this.selectedHeadKeys[0] === '2' ? 'ant-menu-item-selected' : ''
    }
  },
  watch: {
  }
};
</script>

<style lang="less" scoped>
  .header-menu-col{
    max-width: 100%;
    text-align: center;
  }
  .header-menu{
    width: 300px;
  }
  .header-menu-app-div{
    width: 450px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    .ant-carousel {
      height: 100%;
      :deep(.slick-slider) {
        height: 100%;
        .slick-list{
          height: 100%;
          .slick-track{
            height: 100%;
            .slick-slide {
              text-align: center;
              height: 100%;
              line-height: 160px;
              background: #ffffff;
              overflow: hidden;
              > div {
                height: 100%;
                .header-menu-app-basic-type{
                  height: 100%;
                  .basic-type-card{
                    height: 100%;
                    .ant-card-head{
                      min-height: 20px;
                      height: 48px;
                      line-height: 48px;
                      .ant-card-head-title{
                        padding: 0;
                      }
                    }
                    .ant-card-body{
                      padding: 0;
                      height: 100%;
                      .basic-type-card-divider{
                        margin-top: 12px;
                      }
                    }
                  }
                }
                .header-menu-app-other-type{
                  height: 100%;
                  .other-type-card{
                    height: 100%;
                    .ant-card-head{
                      min-height: 20px;
                      height: 48px;
                      line-height: 48px;
                      .ant-card-head-title{
                        padding: 0;
                      }
                    }
                    .ant-card-body{
                      padding: 0;
                      height: 100%;
                      .other-type-card-divider{
                        margin-top: 12px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .slick-dots {
          margin-bottom: 0;
          li {
            button{
              background: #001529;
              height: 12px;
              border-radius: 10px;
            }
          }
        }
      }
    }
  }

  .type-card-title{
    font-weight: 900;
    .type-card-icon{
      margin-right: 10px;
      font-weight: 900;
    }
  }
  .basic-type-app-row {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden
  }


</style>
